<template>
  <ChartContainer ref="chartContainer" :option="option" />
</template>

<script>
import { onMounted } from 'vue';
import ChartContainer from './ChartContainer.vue';

export default defineComponent({
  name: 'BarChart',
  components: { ChartContainer },
  props: {
    category: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    dtEnd: {
      type: Number,
      default: 120
    }
  },
  setup(props) {
    const option = ref({});

    const chartContainer = ref(null);

    const data = computed(() => props.data);
    const category = computed(() => props.category);

    watch(
      () => props.data,
      () => {
        initOption();
      }
    );

    const initOption = () => {
      option.value = {
        title: {
          text: props.title,
          left: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          left: 'left',
          data: [data.value[0].name, data.value[1].name],
          textStyle: {
            color: 'white'
          },
          itemWidth: 12,
          itemHeight: 10
        },
        xAxis: {
          type: 'category',
          data: category.value,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            fontFamily: 'Microsoft YaHei'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 10,
            end: props.dtEnd,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            color: '#fff',
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: data.value[0].name,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: new chartContainer.value.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fccb05'
                },
                {
                  offset: 1,
                  color: '#f5804d'
                }
              ]),
              borderRadius: 12
            },
            data: data.value[0].value
          },
          {
            name: data.value[1].name,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: new chartContainer.value.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#248ff7'
                },
                {
                  offset: 1,
                  color: '#6851f1'
                }
              ]),
              borderRadius: 11
            },
            data: data.value[1].value
          }
        ]
      };
    };

    onMounted(() => {
      initOption();
    });

    return {
      option,
      chartContainer
    };
  }
});
</script>
